import type { FC } from "react";
import { useUpdateEffect } from "ahooks";
import classNames from "classnames";
import { produce } from "immer";
import { useRef } from "react";

import styles from "./index.module.scss";
import { batchUpdateCustomization } from "./layout";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";
// import { useCustomizationStore, usePersonalDetailsStore } from "@/store/createStore";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { customization, updateLayout, updateSectionOrder, addCustomization } =
    useCustomizationStore(
      (state) => state,
      (o, n) => {
        return (
          o.customization.layout.colsFromDetails ===
            n.customization.layout.colsFromDetails &&
          o.customization.layout.detailsPosition ===
            n.customization.layout.detailsPosition &&
          o.customization.sectionOrder === n.customization.sectionOrder
        );
      }
    );
  const clickstack = useRef(new Set([customization.layout.detailsPosition]));

  const { personalDetails } = usePersonalDetailStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails.id === n.personalDetails.id;
    }
  );
  useUpdateEffect(() => {
    clickstack.current.clear();
  }, [customization.template]);
  function change(data) {
    updateLayout(data.layout);
    updateSectionOrder(data.sectionOrder);
  }
  return (
    <>
      <div style={{ marginBottom: "30px" }}>
        <div className={styles.headPosition}>
          <div
            style={{ textAlign: "center" }}
            onClick={async () => {
              if (customization.layout.detailsPosition === "top") {
                return;
              }
              change(
                produce(customization, (draft) => {
                  draft.layout.detailsPosition = "top";
                  draft.layout.colsFromDetails[draft.layout.detailsPosition] =
                    "one";
                })
              );
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: "layout.detailsPosition",
                      value: "top",
                    },
                    {
                      path: "layout.colsFromDetails.top",
                      value: "one",
                    },
                  ],
                  id: customization.id,
                });
              } else if (personalDetails.id) {
                addCustomization(personalDetails.id);
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.top,
                customization.layout.detailsPosition === "top"
                  ? styles.active
                  : ""
              )}
            ></div>
            <div>居上</div>
          </div>
          <div
            style={{ textAlign: "center" }}
            onClick={async () => {
              if (customization.layout.detailsPosition === "left") {
                return;
              }
              clickstack.current.add("left");

              const data = produce(customization, (draft) => {
                if (clickstack.current.has("right")) {
                  clickstack.current.delete("right");
                  const leftSectionChildren =
                    draft.sectionOrder.two.leftSectionChildren;
                  draft.sectionOrder.two.leftSectionChildren =
                    draft.sectionOrder.two.rightSectionChildren;
                  draft.sectionOrder.two.rightSectionChildren =
                    leftSectionChildren;
                }
                draft.layout.detailsPosition = "left";
                draft.layout.colsFromDetails[draft.layout.detailsPosition] =
                  "two";
              });
              change(data);
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: "layout.detailsPosition",
                      value: "left",
                    },
                    {
                      path: "layout.colsFromDetails.left",
                      value: "two",
                    },
                    {
                      path: "sectionOrder.two.leftSectionChildren",
                      value: data.sectionOrder.two.leftSectionChildren,
                    },
                    {
                      path: "sectionOrder.two.rightSectionChildren",
                      value: data.sectionOrder.two.rightSectionChildren,
                    },
                  ],
                  id: customization.id,
                });
              } else if (personalDetails.id) {
                addCustomization(personalDetails.id);
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.left,
                customization.layout.detailsPosition === "left"
                  ? styles.active
                  : ""
              )}
            ></div>
            <div>居左</div>
          </div>
          <div
            style={{ textAlign: "center" }}
            onClick={async () => {
              if (customization.layout.detailsPosition === "right") {
                return;
              }
              clickstack.current.add("right");

              const data = produce(customization, (draft) => {
                if (clickstack.current.has("left")) {
                  clickstack.current.delete("left");
                  const leftSectionChildren =
                    draft.sectionOrder.two.leftSectionChildren;
                  draft.sectionOrder.two.leftSectionChildren =
                    draft.sectionOrder.two.rightSectionChildren;
                  draft.sectionOrder.two.rightSectionChildren =
                    leftSectionChildren;
                }
                draft.layout.detailsPosition = "right";
                draft.layout.colsFromDetails[draft.layout.detailsPosition] =
                  "two";
              });
              change(data);
              if (customization.id) {
                batchUpdateCustomization({
                  updates: [
                    {
                      path: "layout.detailsPosition",
                      value: "right",
                    },
                    {
                      path: "layout.colsFromDetails.right",
                      value: "two",
                    },
                    {
                      path: "sectionOrder.two.leftSectionChildren",
                      value: data.sectionOrder.two.leftSectionChildren,
                    },
                    {
                      path: "sectionOrder.two.rightSectionChildren",
                      value: data.sectionOrder.two.rightSectionChildren,
                    },
                  ],
                  id: customization.id,
                });
              } else if (personalDetails.id) {
                addCustomization(personalDetails.id);
              }
            }}
          >
            <div
              className={classNames(
                styles.layoutTypes,
                styles.right,
                customization.layout.detailsPosition === "right"
                  ? styles.active
                  : ""
              )}
            ></div>
            <div>居右</div>
          </div>
        </div>
      </div>
      {customization.layout.detailsPosition === "top" ? (
        <div style={{ marginBottom: "20px" }}>
          <div className={styles.columns}>
            <div
              className={classNames(
                customization?.layout?.colsFromDetails?.[
                  customization.layout.detailsPosition
                ] === "one"
                  ? styles.active
                  : "",
                styles.columnItem
              )}
              onClick={async () => {
                if (
                  customization?.layout?.colsFromDetails?.[
                    customization.layout.detailsPosition
                  ] === "one"
                )
                  return;
                change(
                  produce(customization, (draft) => {
                    draft.layout.colsFromDetails[draft.layout.detailsPosition] =
                      "one";
                  })
                );
                if (customization.id) {
                  batchUpdateCustomization({
                    updates: [
                      {
                        path: `layout.colsFromDetails.${customization?.layout.detailsPosition}`,
                        value: "one",
                      },
                    ],
                    id: customization.id,
                  });
                } else if (personalDetails.id) {
                  addCustomization(personalDetails.id);
                }
              }}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 47 24"
                className="xssm:w-12 w-10"
              >
                <rect
                  width="44.971"
                  height="4.878"
                  x="1.011"
                  y="0.523"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="44.971"
                  height="4.878"
                  x="1.011"
                  y="9.339"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="44.971"
                  height="4.878"
                  x="1.011"
                  y="18.155"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
              </svg>
            </div>
            <div
              className={classNames(
                customization?.layout?.colsFromDetails?.[
                  customization.layout.detailsPosition
                ] === "two"
                  ? styles.active
                  : "",
                styles.columnItem
              )}
              onClick={async () => {
                if (
                  customization?.layout?.colsFromDetails?.[
                    customization.layout.detailsPosition
                  ] === "two"
                )
                  return;
                change(
                  produce(customization, (draft) => {
                    draft.layout.colsFromDetails[draft.layout.detailsPosition] =
                      "two";
                  })
                );
                if (customization.id) {
                  batchUpdateCustomization({
                    updates: [
                      {
                        path: `layout.colsFromDetails.${customization?.layout.detailsPosition}`,
                        value: "two",
                      },
                    ],
                    id: customization.id,
                  });
                } else if (personalDetails.id) {
                  addCustomization(personalDetails.id);
                }
              }}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 47 24"
                className="xssm:w-12 w-10"
              >
                <rect
                  width="20.671"
                  height="4.878"
                  x="0.853"
                  y="0.841"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="20.671"
                  height="4.878"
                  x="0.853"
                  y="9.339"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="20.671"
                  height="4.878"
                  x="0.853"
                  y="17.838"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="20.671"
                  height="4.878"
                  x="25.476"
                  y="0.84"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="20.671"
                  height="4.878"
                  x="25.476"
                  y="9.339"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
                <rect
                  width="20.671"
                  height="4.878"
                  x="25.476"
                  y="17.838"
                  fill="currentColor"
                  stroke="currentColor"
                  rx="1.5"
                ></rect>
              </svg>
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default Index;
